<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>生产进度表</title>
</head>
<body>
<h2 style="text-align: center" th:text="${title}"></h2>
<div id="scrollDiv">
    <div class="grid-container" th:each="item : ${productionPlan}">
        <div class="grid-row" th:text="${item.machineName}">
        </div>

        <div class="grid-row">
            <div class="grid-cell">客户</div>
            <div class="grid-cell">规格</div>
            <div class="grid-cell">重量</div>
            <div class="grid-cell">生产批次</div>
        </div>
        <div class="grid-row" th:each="order : ${item.orders}">
            <div class="grid-cell" th:text="${order.custom}"></div>
            <div class="grid-cell" th:text="${order.specification}"></div>
            <div class="grid-cell" th:text="${order.weight}"></div>
            <div class="grid-cell" th:text="${order.batchNumber}"></div>
        </div>
    </div>
</div>
</body>

<script>
    var orders = [(${productionPlan})];

    window.onload = function () {
        setInterval(refreshPage, 30000); // 每30秒获取一次
        const div = document.getElementById('scrollDiv');
        const totalHeight = div.scrollHeight - div.clientHeight; // 获取整个div的高度
        let currentTop = 0; // 当前的滚动位置
        let intervalId;
        function startScrolling() {
            intervalId = setInterval(function() {
                currentTop += 1; // 每次滚动1像素
                //到达顶部或底部时暂停滚动
                if (currentTop==1||currentTop==totalHeight){
                    clearInterval(intervalId); // 清除定时器
                    setTimeout(() => {
                        startScrolling();// 恢复滚动
                    }, 2000);
                    return;
                }
                if (currentTop >= totalHeight) {
                    currentTop = 0; // 达到底部时重置滚动位置
                }
                div.scrollTop = currentTop;
            }, 30); // 每10毫秒滚动一次
        }

        startScrolling();
        // 定义动画逻辑
        /*function animate() {
            // 更新元素的位置
            currentTop += 1; // 每次滚动1像素
            div.scrollTop = currentTop;

            // 检查是否到达底部
            if (currentTop >= totalHeight) {
                currentTop = 0; // 达到底部时重置滚动位置
            }

            // 继续下一帧动画
            intervalId = requestAnimationFrame(animate);
        }

        // 启动动画
        animate();*/
    };

    function refreshPage() {
        location.reload();
    }
</script>

<style>
    /* styles.css */
    body {
        font-family: Arial, sans-serif;
        background: #003366;
        min-height: 100vh;
        margin: 0;
        color: white;
    }
    #scrollDiv{
        font-size: 20px;
        height: 450px;
        -ms-overflow-style: none;  /* IE 和 Edge */
        scrollbar-width: none;     /* Firefox */
        overflow-y: auto;
        padding: 0.25rem;
    }
    #scrollDiv::-webkit-scrollbar{
        width: 0;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 0.35fr repeat(6, 1fr);
        grid-gap: 0.25rem;
        padding: 0.25rem;
        grid-auto-rows: minmax(min-content, max-content); /* 自动调整行高 */
        align-items: center; /* 使所有行内容上下居中 */
    }
    .grid-container:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }

    .grid-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
    }

    .grid-cell {
        flex-basis: calc(25% - 1em);
        padding: 0.125em;
        box-sizing: border-box;
    }

    .grid-cell:first-child {
        flex-basis: calc(25% - 1em * 2);
    }

    .grid-cell:last-child {
        flex-basis: calc(25% - 1em * 2);
    }
</style>
</html>